<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="/bootstrap-4.6.2-dist/css/bootstrap.min.css"  crossorigin="anonymous">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>左右结构页面</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
    }
    .container {
      display: flex;
      height: 100vh;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    .sidebar {
      width: 200px;
      background-color: #e4cbcf;
      color: #5a4d4d;
      padding: 20px;
      transition: width 0.3s ease;
    }
    .sidebar:hover {
      width: 220px;
    }
    .sidebar a {
      text-decoration: none;
      color: #1d2124;
      display: block;
      padding: 10px 0;
      transition: color 0.3s ease;
    }
    .sidebar a:hover {
      color: #0b2e13;
      transform: translateX(5px);
    }
    .sidebar h2 {
      margin: 0 0 20px;
      font-size: 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      padding-bottom: 10px;
    }
    .sidebar ul {
      list-style: none;
      padding: 0;
    }
    .sidebar ul li {
      margin-bottom: 10px;
    }
    .content {
      flex: 1;
      padding: 20px;
      background-color: #c3d7e0;
      overflow-y: auto;
    }
    table.table.table-striped {
      border-collapse: collapse;
      width: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    table.table.table-striped th,
    table.table.table-striped td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    table.table.table-striped th {
      background-color: #f2f2f2;
    }
    table.table.table-striped tr:hover {
      background-color: #f5f5f5;
    }
    button{
      border: 1px solid gray;
      border-radius: 5%;
      width: 120px;
      height: 50px;
      font-family: '楷体';
      font-size: large;
    }
    nav[aria-label="Page navigation example"] ul.pagination {
      display: flex;
      flex-wrap: nowrap;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    nav[aria-label="Page navigation example"] ul.pagination li.page-item {
      margin-right: 10px;
      white-space: nowrap;
      border: 5px solid #ccc; /* 添加边框样式 */
      border-radius: 5px;
      padding: 10px;
    }

    nav[aria-label="Page navigation example"] ul.pagination li.page-item:last-child {
      margin-right: 0;
    }
    a {
      text-decoration: none;
      color: inherit;
      transition: none;
    }

    a:hover {
      text-decoration: none;
      color: inherit;
    }
  </style>
</head>
<body>
<div class="row" th:replace="header.html"></div>
<div class="container">
  <div class="sidebar" th:include="left.html"></div>
  <div class="content">
    <button type="button" id="addCourseButton" class="btn btn-outline-primary" onclick="addCourse()" >新增课程</button>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>序号</th>
        <th>课程名</th>
        <th>教师ID</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="course:${courses}">
        <th th:text="${course.id}"></th>
        <th th:text="${course.name}"></th>
<!--        <th th:text="${course.teacher.name}"></th>-->
        <th th:if="${course.teacher != null}" th:text="${course.teacher.name}">暂无教师信息</th>
        <th th:if="${course.teacher == null}">暂无教师信息</th>
<!--        <div th:each="studentScore:${course.scores}">-->
<!--          <span th:text="studentScore.student_id"></span>-->
<!--          <span th:text="studentScore.score"></span>-->
<!--        </div>-->
        <td><a th:href="@{/Course/remove(id=${course.id})}">删除</a></td>
        <td><a th:href="@{/Course/toEdit(id=${course.id})}">修改</a></td>
      </tr>
      </tbody>
    </table>
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item"><a class="page-link" th:href="@{/Course/list/{currPage}/3(currPage=${currPage}-1)}">Previous</a></li>
          <li class="page-item"><a class="page-link" th:href="@{/Course/list/1/3}">1</a></li>
          <li class="page-item"><a class="page-link" th:href="@{/Course/list/2/3}">2</a></li>
          <li class="page-item"><a class="page-link" th:href="@{/Course/list/3/3}">3</a></li>
          <li class="page-item"><a class="page-link" th:href="@{/Course/list/{currPage}/3(currPage=${currPage}+1)}">Next</a></li>
        </ul>
      </nav>
  </div>
</div>
<div th:replace="footer.html"></div>
<script>
  function addCourse(){
    window.location.href="/Course/toPage?page=addCourse";
  }
  document.addEventListener("DOMContentLoaded",function (){
    var button=document.getElementById("addCourseButton");
    button.addEventListener("click",addCourse);
  });
</script>
<script src="/bootstrap-4.6.2-dist/js/jquery.min.js"  crossorigin="anonymous"></script>
<script src="/bootstrap-4.6.2-dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
</body>
</html>